<template>
    <div class="loginBox">
        <div class="title">{{title}}</div>
        <ul>
            <li>
                <input v-model="email" placeholder="注册的邮箱" class="inputBox"/>
            </li>
            <li>
                <input v-model="password" type="password" placeholder="登录密码" class="inputBox" />
            </li>
            <li>
                <input v-model="zfbAccount" placeholder="支付宝账号" class="inputBox" />
            </li>
        </ul>
        <div class="submitBox">
            <div>
                <Button class="btn" type="primary" @click="doLogin">{{submitBtnText}}</Button>
            </div>
        </div>
    </div>
</template>

<script>
import { submitAppLogin } from "@/apis/Login";
import ServerResponseCode from "@/utils/ServerResponseCode";
import { isBlank } from "@/utils/validate";
import { setToken, setMerchantAccount } from "@/utils/auth";

export default {
  data() {
    return {
      title: "收款吧客户端",
      email: "",
      password: "",
      zfbAccount: "",
      submitBtnText: "登录"
    };
  },
  watch: {},
  methods: {
    // 发起登录
    doLogin() {
      if (isBlank(this.email)) {
        this.$Message.warning("邮箱不能为空");
        return;
      }
      if (isBlank(this.password)) {
        this.$Message.warning("登录密码不能为空");
        return;
      }
      if (isBlank(this.zfbAccount)) {
        this.$Message.warning("支付宝账号不能为空");
        return;
      }
      submitAppLogin(this.email, this.password, this.zfbAccount).then(
        response => {
          console.log("response:" + response);
          if (response.code === ServerResponseCode.SUCCESS) {
            // 如果成功，跳转到主页。
            // 1、将token保存在本地
            setToken(response.data.token);
            let merchantAccount = response.data.merchantAccount;
            // 将商户的收款账户信息保存到本地
            setMerchantAccount(merchantAccount);
            // 2、跳转到主页
            this.$router.push({ path: "/app/main"});
            /**
             * data中包含了 merchantAccount和token对象。一并传递给app原生
             */
            let merchantAccountDataJsonStr = JSON.stringify(response.data);
            window.pay.saveUserInfo(merchantAccountDataJsonStr);
          } else {
            this.$Message.warning(response.msg);
          }
        }
      );
    }
  },
  // 组件挂载时执行
  mounted() {}
};
</script>

<style scoped>
.loginBox {
  padding: 20px;
  padding-top: 100px;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-color: #f2f2f2;
}

.loginBox .title {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 24px;
}

.loginBox ul,
li {
  padding: 0;
  margin: 0;
}

.loginBox ul li {
  list-style: none;
  height: 50px;
  line-height: 50px;
}
.loginBox ul li .inputBox {
  border: none;
  border: 1px solid #ccc;
  padding: 5px;
  height: 35px;
  width: 100%;
  border-radius: 5px;
  outline-style: inherit;
  outline-color: #409eff;
}

.btn {
  width: 100%;
  height: 40px;
  margin-top: 10px;
}
</style>
